<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>使用getJSON()方法异步加载JSON格式数据</title>
		<script src="./jquery.js" type="text/javascript"></script>
	</head>
	<body>
		<div id="divtest">
				<label for="btnShow">我最喜欢的一项运动</label>
				<input id="btnShow" type="button" value="加载" click="" />
			<ul></ul>
		</div>
		<script type="text/javascript">
			// 点击页面中的“加载”按钮
			// 调用getJSON()方法获取服务器中JSON格式文件中的数据
			// 并遍历数据，将指定的字段名内容显示在页面中
			$(function() {
				$("#btnShow").bind("click", function() {
					var $this = $(this);
					$.getJSON("http://localhost:8080/jqurey-test-demo/sport.json", function(data) {
						$this.attr("disabled", "true")
						$.each(data, function(index, sport) {
							// $("ul").append(`<li>${sport["name"]}</li>`)
							if(index == 2) {
								$("ul").append(`<li>${sport["name"]}</li>`)
							}
						})
					})
				})
			});
		</script>
	</body>
</html>
